<template>
  <f7-page>
    <f7-navbar back-link=" " class="no-hairline"></f7-navbar>
    <div class="content-padding login-register-content">
<!--      <h1>{{$t('m.reg1')}}</h1>-->
      <div class="title-box">
        <div>
          <div>
            <img src="../static/logo2.png" alt="">
            <p>零极生态</p>
          </div>
          <h2>注册账户</h2>
        </div>
        <div>
          <f7-button fill @click="handleDownload($store.getters.config.config.iphone_url)">iOS下载</f7-button>
          <f7-button fill @click="handleDownload($store.getters.config.config.apk_url)">安卓下载</f7-button>
        </div>
      </div>
      <div class="select-accounts-box">
        <div class="register-phone">
          <custom-input type="tel" v-model="registerFormItems.phone" :placeholder="$t('m.login2')">
            <div class="phone-type" @click="showDropDown = !showDropDown">
              <span>{{registerFormItems.phoneType}}</span>
              <f7-icon f7="chevron_down"></f7-icon>
            </div>
          </custom-input>
        </div>
        <my-select :show.sync="showDropDown" @select="handleDropDownSelect">
          <my-select-item>+86</my-select-item>
          <my-select-item>+87</my-select-item>
          <my-select-item>+88</my-select-item>
        </my-select>
      </div>
      <custom-input :placeholder="$t('m.reg2')" button v-model="registerFormItems.phone_code" :send-status="smsStatus" @send-sms="handleSendSms"></custom-input>
      <custom-input type="password" :placeholder="$t('m.reg3')" v-model="registerFormItems.pwd"></custom-input>
      <custom-input type="password" :placeholder="$t('m.reg4')" v-model="registerFormItems.pwd2"></custom-input>
      <custom-input type="password" :placeholder="$t('m.reg5')" v-model="registerFormItems.twopwd"></custom-input>
      <custom-input type="password" :placeholder="$t('m.reg6')" v-model="registerFormItems.twopwd2"></custom-input>
      <custom-input :placeholder="$t('m.reg7')" v-model="registerFormItems.invit_code"></custom-input>

      <div class="buttons-box">
        <f7-button fill color="blue" large :disabled="!agreeXieyi" @click="handleRegister">{{$t('m.reg1')}}</f7-button>

        <div class="xieyi-box">
          <label>
            <f7-checkbox name="xieyi" :checked="agreeXieyi" @change="agreeXieyi = !agreeXieyi"></f7-checkbox>
            <p>{{$t('m.reg8')}} <f7-link href="/user-agreement/">《{{$t('m.reg9')}}》</f7-link></p>
          </label>
        </div>
      </div>
    </div>
  </f7-page>
</template>

<script>
  import MySelect from '../ajComponents/smartSelect';
  import MySelectItem from '../ajComponents/smartSelect/item';
  import { register } from "../api/login";
  import { sendPhoneCode } from "../api";

  export default {
    name: "register",
    data () {
      return {
        registerFormItems: {
          phone: '',
          phoneType: '+86',
          phone_code: '',
          pwd: '',
          pwd2: '',
          twopwd: '',
          twopwd2: '',
          invit_code: this.$f7route.query.invite_code || ''
        },
        showDropDown: false,
        agreeXieyi: true,
        smsStatus: false
      }
    },
    methods: {
      handleDropDownSelect (value) {
        console.log(value);
        this.registerFormItems.phoneType = value;
      },
      handleRegister () {
        register(this.registerFormItems).then(res => {
          this.$f7router.back();
        })
      },
      handleDownload(url) {
        if (url) window.open(url);
        else this.$toast('暂无下载链接')
      },
      handleSendSms() {
        sendPhoneCode({ phone: this.registerFormItems.phone, type: 1}).then(() => {
          this.smsStatus = true;
        })
      }
    },
    components: {
      MySelect,
      MySelectItem
    }
  }
</script>

<style scoped lang="scss">
  .title-box {
    display: flex;
    justify-content: space-between;
    padding: 50px 0;
    img {
      width: 150px;
      height: auto;
    }
    .button {
      margin: 5px 0;
    }
    > div:first-child {
      display: flex;
      align-items: center;
      text-align: center;
      h2 {
        margin-left: 20px;
        font-size: 32px;
      }
    }
  }
  .select-accounts-box {
    position: relative;
  }
  .register-phone {
    /deep/ .van-field {
      padding-left: 130px;
    }
    .custom-input {
      position: relative;
      .phone-type {
        padding-right: 10px;
        position: absolute;
        left: 20px;
        z-index: 999;
        border-right: 2px solid $colorGrey;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
  .xieyi-box {
    label {
      display: flex;
      align-items: center;
    }
    padding-top: 50px;
    p {
      margin-left: $padding20;
    }
  }
</style>
